import { useStores } from '@/stores';
import { FLAW_CARD_LABEL, imgUrl } from '@/utils/constant';
import { observer } from 'mobx-react-lite';
import { FC, useState } from 'react';
import './index.less';
import { runInAction } from 'mobx';

const TabContent: FC = () => {
  const { lotStore } = useStores();
  const [clickTimeChange, setClickTimeChange] = useState(null as any);
  /**
   * 单击--缺陷卡片
   * @param flaw
   */
  const oneClickFlawCard = flaw => {
    // if (clickTimeChange) {
    //   clearTimeout(clickTimeChange);
    // }
    // const timer = setTimeout(() => oneClickAcitveCard(flaw), 100);
    // setClickTimeChange(timer);
    oneClickAcitveCard(flaw);
  };

  /**
   * 单击-激活-高亮-卡片
   * @param flaw
   */
  const oneClickAcitveCard = flaw => {
    runInAction(() => {
      lotStore.card.flawIdChecked = flaw.uid;
      // 打开缺陷详情页
      lotStore.card.detailShowDialog = true;
      lotStore.card.detailFlawRow = flaw;
    });
  };

  /**
  //  * 双击--缺陷卡片
  //  * @param flaw
  //  */
  // const doubleClickFlawCard = flaw => {
  //   clearTimeout(clickTimeChange); // 消除延迟
  //   runInAction(() => {
  //     lotStore.card.detailShowDialog = true;
  //     lotStore.card.detailFlawRow = flaw;
  //   });
  // };

  return (
    <div className="tab-content">
      {lotStore.card.flawCard.map(flaw => (
        <li
          className={`flaw-card ${lotStore.card.flawIdChecked == flaw.uid ? 'high-light' : ''} `}
          key={flaw.uid}
          onClick={() => oneClickFlawCard(flaw)}
          // onDoubleClick={() => doubleClickFlawCard(flaw)}
        >
          <div className="flaw-card-info" key={flaw.uid + 'card'}>
            {Object.keys(FLAW_CARD_LABEL).map((key: any, index) => (
              <div className="row-info" key={index + 'info'}>
                <div className="card-name">{FLAW_CARD_LABEL[key].name}：</div>
                <div className="card-val">{flaw[key]}</div>
              </div>
            ))}
          </div>
          <div className="flaw-image" key={flaw.uid + 'img'}>
            <img src={flaw.imgPath || ''} alt="" style={{ objectFit: 'contain', height: '100%', width: '100%', position: 'absolute', left: 0, top: 0 }} />
          </div>
        </li>
      ))}
    </div>
  );
};
export default observer(TabContent);
